<template>
    <div class="creat page">
        <div class="title">
            <p>创作剧本</p>
            <div class="right" @click="back()">
                <i class="iconfont icon-return"></i>
                返回
            </div>
        </div>
        <div class="cont">
            <el-form :model="form" class="form" size="small" label-width="120px">
                <el-form-item label="剧本标题：">
                    <el-input v-model="form.title"></el-input>
                </el-form-item>
                <el-form-item label="剧本类型：">
                    <el-select
                            v-model="form.creationTypeID"
                            placeholder="剧本类型："
                            @change="change"
                    >
                        <el-option
                                :label="item.creationTypeModel.creationTypeName"
                                :value="item.creationTypeModel.id"
                                v-for="(item, index) in creationType"
                                :key="index"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="剧本分类：">
                    <div class="checkCont">
                        <p>{{ creationTypeName }}</p>
                        <el-checkbox-group v-model="chooseCreationType">
                            <!-- <el-checkbox
                              :label="item.creationTypeModel.id"
                              v-for="(item, index) in ChooseCreationList"
                              :key="index"
                              >{{ item.creationTypeModel.creationTypeName }}</el-checkbox
                            > -->
                            <div class="labelCont" v-for="(item, index) in ChooseCreationList" :key="index">
                                <div class="left">{{ item.creationTypeModel.creationTypeName }}：</div>
                                <div class="right">
                                    <el-checkbox
                                            :label="item1.id"
                                            v-for="(item1, index1) in item.creationTypeModels"
                                            :key="index1"
                                    >{{ item1.creationTypeName }}
                                    </el-checkbox>
                                </div>
                            </div>
                        </el-checkbox-group>
                    </div>
                </el-form-item>
                <el-form-item label="角色数量：">
                    <el-select
                            v-model="form.roleNumberID"
                            placeholder="角色数量："
                    >
                        <el-option
                                :label="item.roleNumberName"
                                :value="item.id"
                                v-for="(item, index) in roleNumberList"
                                :key="index"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="拍摄场景：">
                    <el-select
                            v-model="form.sceneID"
                            placeholder="拍摄场景："
                    >
                        <el-option
                                :label="item.sceneName"
                                :value="item.id"
                                v-for="(item, index) in sceneList"
                                :key="index"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="剧本展现类型：">
                    <el-select
                            v-model="form.showType"
                            placeholder="剧本展现类型："
                    >
                        <el-option label="文本" :value="1" @click.stop="fen_jing_show=false"></el-option>
                        <el-option label="分镜" :value="2" @click.stop="fen_jing_show=true"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="作品简介：">
                    <el-input
                            v-model="form.description"
                            placeholder="请输入2-15个字符"
                    ></el-input>
                </el-form-item>

                <!--                <el-form-item label="作品原文：">-->
                <!--                    <el-input v-model="form.content" placeholder="请撰写详细的剧本.." type="textarea" rows="5" resize="none"></el-input>-->
                <!--                </el-form-item>-->

                <el-form-item label="作品原文：" class="form_content">
                    <!--                    <el-input v-model="form.content" placeholder="请撰写详细的剧本.." type="textarea" rows="5" resize="none"></el-input>-->

                    <div class="form_content" id="one">
                        <div class="demo1" ref="demo1"></div>
                    </div>

                </el-form-item>

                <div class="liyan_add_fen_jing" v-if="fen_jing_show">
                    <div class="liyan_add_fen_jing_title">分镜撰写：</div>

                    <div class="liyan_add_fen_jing_title_content">
                        <div class="fen_jing_duan_luo">段落</div>
                        <div class="fen_jing_dui_bai">解说对白</div>
                        <div class="fen_jing_zi_mu">字幕</div>
                        <div class="fen_jing_shi_chang">时长</div>
                        <div class="fen_jing_ji_wei">机位</div>
                        <div class="fen_jing_yin_yue">背景音乐</div>
                        <div class="fen_jing_jian_yi">建议</div>
                    </div>

                    <div class="liyan_add_fen_jing_item" v-for="(item,index) in form.storyboards"
                         :key="item.srot">
                        <div class="duanluo">{{item.srot}}</div>
                        <div class="jieshuo">
                            <el-input
                                    v-model="item.commentary"
                                    :autosize="{ minRows: 2, maxRows: 5 }"
                                    type="textarea"
                                    placeholder="">
                            </el-input>
                        </div>
                        <div class="zimu">
                            <el-input
                                    v-model="item.subtitle"
                                    :autosize="{ minRows: 2, maxRows: 5 }"
                                    type="textarea"
                                    placeholder="">
                            </el-input>
                        </div>
                        <div class="shichang">
                            <el-input v-model="item.duration" placeholder=""/>
                        </div>
                        <div class="jiwei">
                            <el-input v-model="item.seat" placeholder="" type="number"/>
                        </div>
                        <div class="yinyue">
                            <el-input v-model="item.backgroundMusic" placeholder=""/>
                        </div>
                        <div class="jianyi">
                            <el-input
                                    v-model="item.suggest"
                                    :autosize="{ minRows: 2, maxRows: 5 }"
                                    type="textarea"
                                    placeholder="">
                            </el-input>
                        </div>
                    </div>

                    <div class="add_and_del_icon">
                        <i class="iconfont icon-add" style="font-size: 30px;"
                           @click.stop="liyan_add_fen_jing_item_list_add"></i>
                        <i class="iconfont icon-jianshao" style="font-size: 30px;font-weight: bold"
                           @click.stop="liyan_add_fen_jing_item_list_del"></i>
                    </div>

                </div>

                <el-form-item label="观看类型：">
                    <el-radio-group v-model="form.scanType">
                        <el-radio :label="1" @click.stop="shou_quan_show=true">授权</el-radio>
                        <el-radio :label="2" @click.stop="shou_quan_show=false">免费</el-radio>
                    </el-radio-group>
                    <span class="tips">选择“免费”后，观看作品将不收取费用</span>
                </el-form-item>
                <el-form-item label="定价：" class="disflex" v-if="shou_quan_show">
                    <el-input v-model="form.price" placeholder="请输入定价" type="number"></el-input>
                    <span style="padding-left: 10px">元</span>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit(2)">提交审核</el-button>
                    <el-button @click="onSubmit(1)">保存草稿</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script>
    import {
        CreationTypeListByTypeId,
        SceneList,
        RoleNumberList,
        ScriptWritingEdit,
        ScriptWritingDetail,
    } from "@/api/ScriptWriting";
    import _ from "lodash";
    import {ElMessage} from 'element-plus'
    import wangEditor from 'wangeditor'

    export default {
        data() {
            return {

                chooseCreationType: [],
                creationType: [],
                ChooseCreationList: [],
                sceneList: [],
                roleNumberList: [],
                creationTypeName: "",
                form: {
                    scanType: 1,
                    chooseCreationType: [],
                },
                //李炎添加的状态
                liyan_add_fen_jing_item_list: [
                    {
                        srot: 1,
                        Commentary: '',
                        Subtitle: '',
                        Duration: '',
                        Seat: 0,
                        BackgroundMusic: '',
                        suggest: '',
                    },
                ],
                fen_jing_show: false,
                shou_quan_show: undefined,
                data: {},

                editor: null,
                editorData: ''
            };
        },
        created() {
            this.getList(0);
            this.getList(1);

            ScriptWritingDetail({id: this.$route.query.id}).then(res => {
                this.form = res.data
                console.log("初始数据", res.data)

                if (res.data.scanType == 1) {
                    this.shou_quan_show = true
                } else {
                    this.shou_quan_show = false
                }

                if (res.data.storyboards.length != 0) {
                    this.fen_jing_show = true
                    console.log('boards', this.form.storyboards)
                }


                if (this.form.chooseCreationType.length != 0) {
                    this.chooseCreationType = this.form.chooseCreationType.map(item => item.creationTypeId)
                    console.log('哈哈啊哈', this.chooseCreationType)
                }


                const editor = new wangEditor('.demo1')

                // 配置 onchange 回调函数，将数据同步到 vue 中
                editor.config.onchange = (newHtml) => {
                    this.editorData = newHtml
                }
                // 创建编辑器
                editor.create()
                this.editor = editor

                // this.editor.text=this.form.content

                console.log('ref', this.$refs.demo1.children[1].children[0])

                this.$refs.demo1.children[1].children[0].innerHTML = this.form.content

            })


        },


        watch: {
            form: {
                handler(nv, ov) {
                    console.log('改了')
                },
                deep: true,
                immediate: true,
            },

            // chooseCreationType(nv) {
            //   if (nv.length > 0) {
            //       this.form.chooseCreationType = [];
            //     _.forEach(nv, (v, k) => {
            //         let d =  _.filter(this.ChooseCreationList, (v1) => v1.creationTypeModel.id == v)[0]
            //       this.form.chooseCreationType.push({
            //           CreationTypeName:d.creationTypeModel.creationTypeName,
            //           CreationTypeId:d.creationTypeModel.id
            //       });
            //     });
            //     console.log(this.form.chooseCreationType)
            //   }else{
            //     this.form.chooseCreationType = [];
            //   }
            // },

            //李炎修改 chooseCreationType


        },
        methods: {
            getList(type) {
                CreationTypeListByTypeId({typeId: type}).then((res) => {
                    if (type == 0) {
                        this.creationType = res.data;
                        this.form.creationTypeId = res.data[0].id;
                        this.creationTypeName = res.data[0].creationTypeModel.creationTypeName;
                    } else {
                        this.ChooseCreationList = res.data;
                    }
                });
                SceneList().then((res) => {
                    this.sceneList = res.data.list;
                });
                RoleNumberList().then((res) => {
                    this.roleNumberList = res.data.list;
                });
            },
            change(val) {
                this.creationTypeName = _.filter(
                    this.creationType,
                    (v) => v.creationTypeModel.id == val
                )[0].creationTypeModel.creationTypeName;
                this.getList(val)
            },
            onSubmit(type) {
                console.log('submit')
                this.form.content = this.editorData

                if(this.shou_quan_show){
                    console.log('aaaaaaa',this.shou_quan_show)
                }else{
                    this.form.price=null
                    console.log('bbbbbb',this.shou_quan_show)
                }

                let res = []
                // console.log(this.ChooseCreationList)
                this.ChooseCreationList.forEach(item => {
                    item.creationTypeModels.forEach(item1 => {
                        if (this.chooseCreationType.includes(item1.id)) {
                            let data = {
                                CreationTypeName: item1.creationTypeName,
                                CreationTypeId: item1.id,
                            }
                            res.push(data)
                        }
                    })
                })

                this.form.chooseCreationType = res
                console.log('最后结果为', this.form.chooseCreationType)


                switch (this.form.showType) {
                    case 1:
                        // 分镜类型
                        //  提交请求
                        console.log('保存草稿')
                        this.form.workState = type

                        ScriptWritingEdit(this.form).then((res) => {
                            if (res.code == 0) {
                                this.$message.success('保存成功')
                                setTimeout(() => {
                                    this.$router.push({name: 'creation'})
                                }, 500)
                            } else {
                                this.$message.error(res.data)
                            }

                        })

                        break;
                    case 2:
                        let flag = false
                        this.form.storyboards.forEach(item => {
                            if ((item.Commentary != '') || (item.Subtitle != '') || (item.Duration != '') || (item.Seat != '') || (item.BackgroundMusic != '') || (item.suggest != '')) {
                                flag = true
                            } else {
                                flag = false
                            }
                        })

                        if (flag) {

                            //文本类型
                            if (this.form.showType == 1) {

                                //  提交请求
                                this.form.workState = type
                                ScriptWritingEdit(this.form).then((res) => {
                                    if (res.code == 0) {
                                        this.$message.success('保存成功')
                                        setTimeout(() => {
                                            this.$router.push({name: 'creation'})
                                        }, 500)
                                    } else {
                                        this.$message.error(res.data)
                                    }

                                })
                            } else {

                                // 分镜类型
                                //  提交请求
                                this.form.workState = type
                                // this.form.Storyboards = this.liyan_add_fen_jing_item_list

                                ScriptWritingEdit(this.form).then((res) => {
                                    if (res.code == 0) {
                                        this.$message.success('保存成功')
                                        setTimeout(() => {
                                            this.$router.push({name: 'creation'})
                                        }, 500)
                                    } else {
                                        this.$message.error(res.data)
                                    }

                                })
                            }

                        } else {
                            ElMessage.error('请删除分镜撰写空行')
                        }
                        break;
                }


            },

            back() {
                this.$router.back();
            },

            //李炎添加的方法
            liyan_add_fen_jing_item_list_add() {
                if (this.form.storyboards.length == 0) {
                    this.form.storyboards.push({
                        srot: 1,
                        commentary: '',
                        subtitle: '',
                        duration: '',
                        seat: '',
                        backgroundMusic: '',
                        suggest: '',
                    })
                } else {
                    this.form.storyboards.push({
                        srot: this.form.storyboards[this.form.storyboards.length - 1].srot + 1,
                        commentary: '',
                        subtitle: '',
                        duration: '',
                        seat: '',
                        backgroundMusic: '',
                        suggest: '',
                    })
                }
            },
            liyan_add_fen_jing_item_list_del() {
                if (this.form.storyboards.length == 1) {

                } else {
                    this.form.storyboards.pop()
                }
            },

        },
    };
</script>
<style lang="scss" scoped>
    .creat {
        background: #ffffff;
        box-shadow: 0px 0px 21px 0px rgba(17, 16, 16, 0.07);
        border-radius: 4px;
        overflow: hidden;
        margin-bottom: 30px;

        .title {
            height: 60px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: #2eb0c6;
            box-shadow: 0px 0px 21px 0px rgba(17, 16, 16, 0.07);

            p {
                font-size: 16px;
                font-weight: bold;
                color: #000000;
                text-indent: 20px;
            }

            .right {
                width: 76px;
                height: 30px;
                border: 1px solid #fff;
                border-radius: 4px;
                display: flex;
                justify-content: center;
                align-items: center;
                color: #fff;
                font-size: 14px;
                margin-right: 20px;
                cursor: pointer;

                i {
                    color: #fff;
                    margin-right: 5px;
                }
            }
        }

        .cont {
            margin: 30px;

            .form {
                width: 80%;
                margin: auto;

                .checkCont {
                    border: 1px solid #d3d3d3;
                    border-radius: 4px;
                    padding: 10px;

                    p {
                        color: #999999;
                        font-size: 12px;
                    }
                }

                .disflex {
                    ::v-deep {
                        .el-form-item__content {
                            display: flex;
                        }
                    }
                }

                ::v-deep {
                    .el-form-item__content {
                        .tips {
                            display: block;
                            color: #ff4444;
                            margin-top: -10px;
                            font-size: 12px;
                        }
                    }

                    .labelCont {
                        display: flex;

                        .left {
                            font-size: 14px;
                            width: 110px;
                        }

                        .right {
                            flex: 1;
                        }
                    }
                }
            }
        }
    }

    .liyan_add_fen_jing {
        /*width: 752px;*/
    }

    .liyan_add_fen_jing_title {
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #606266;
    }

    .liyan_add_fen_jing_title_content {
        display: flex;
        margin-top: 10px;
        margin-bottom: 5px;
    }

    .liyan_add_fen_jing_title_content div {
        text-align: center;

        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #606266;
    }

    .fen_jing_duan_luo, .duanluo {
        width: 32px;
        text-align: center;
        margin: auto 0px;
    }

    .fen_jing_dui_bai, .jieshuo {
        width: 180px;
    }

    .fen_jing_zi_mu, .zimu {
        width: 180px;

    }

    .fen_jing_shi_chang, .shichang {
        width: 80px;
    }

    .fen_jing_ji_wei, .jiwei {
        width: 80px;
    }

    .fen_jing_yin_yue, .yinyue {
        width: 80px;
    }

    .fen_jing_jian_yi, .jianyi {
        width: 120px;
    }

    .liyan_add_fen_jing_item {
        display: flex;
    }

    .add_and_del_icon {
        margin-top: 10px;
    }

    .add_and_del_icon > i {
        color: #2EB0C6;
        font-size: 30px;
        cursor: pointer;
    }

    .form_content {

        /deep/.el-form-item__content{
            z-index: 1 !important;
        }
    }

</style>
